<template>
  <div id="app">
    <!-- mode="in-out" 先进入后退出 -->
    <!-- mode="out-in" 先退出再进入 -->
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>

    <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
    <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>
  </div>
</template>
<style>
  /*
    fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
    fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
    fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
    fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
  */
  .fade-enter {
    /* 完全透明 */
    opacity:0;
  }
  .fade-leave{
    /* 完全不透明 */
    opacity:1;
  }
  .fade-enter-active{
    transition:opacity .5s;
  }
  .fade-leave-active{
    opacity:0;
    transition:opacity .5s;
  }
</style>
